import { DynamicComponent } from "@/components/dynamic-component";
import { ModalDrawer } from "@/components/modal-drawer";
import { useState, useEffect } from "react";

interface DynamicWrapperProps {
	path: string;
	title?: string;
	drawer?: boolean;
}

export const DynamicWrapper = ({
	path,
	title,
	drawer,
}: DynamicWrapperProps) => {
	const [visible, setVisible] = useState(true);

	useEffect(() => {
		console.log("DynamicWrapper mounted", { path, title, drawer, visible });
	}, [path, title, drawer, visible]);

	const content = <DynamicComponent path={path} />;

	if (drawer) {
		return (
			<ModalDrawer
				open={visible}
				title={title || ""}
				onClose={() => {
					console.log("Closing drawer");
					setVisible(false);
				}}
			>
				{content}
			</ModalDrawer>
		);
	}

	return content;
};

export const createDynamicComponent = (
	path: string,
	title?: string,
	drawer = false,
) => {
	console.log("Creating dynamic component", { path, title, drawer });
	const Component = () => {
		console.log("Rendering dynamic component", { path, title, drawer });
		return <DynamicWrapper path={path} title={title} drawer={drawer} />;
	};
	return Component;
};
